<template>
    <view class=" page">
        <view class="tab flex justify-center  bac-color-fff pad-b-10 pad-t-10">
            <view style="border-radius:8px" class="over-hid">
                <view class="tab-item font-size-20 border-r-f2 dis-inline-block active"> 
                    预约中心
                </view>
                <navigator open-type="redirect" url="/pages/room/index" class="tab-item font-size-20 dis-inline-block"> 
                    乡镇
                </navigator>
            </view>
        </view>
       <!-- <clear-line :height="10" :bacColor="'#F4F5FA'"></clear-line> -->
       <view class="container mar-t-10">
		   <view class="font-size-18 font-fa-me font-bold mar-t-10">
		       <text class="font-color-price">*</text>
		       <text>咨询类型</text>
		   </view>
            <view class="section mar-t-10 bac-color-fff flex align-center justify-between">
               <!-- <view class="font-size-18 font-fa-me font-bold">
                    <text class="font-color-price">*</text>
                    <text>咨询类型</text>
                </view> -->
				<scroll-view
					class="week-list"
					:scroll="false"
					:scroll-x="true"
					:show-scrollbar="false"
				>	
                <view class="choose-tag-time" v-if="tags.length">
                    <view style="padding: 0 4px; margin-right: 20rpx;" v-for="(tag,i) in tags" :key="i" :class="{acitve:i==tag_index}" @click="changeTag(i)">
                        <text>{{tag.tag_name}}</text>
                    </view>
                </view>
				</scroll-view>
            </view>
            <view class="font-size-18 font-fa-me font-bold mar-t-10">
                <text class="font-color-price">*</text>
                <text>咨询时间</text>
            </view>
            <view class="mar-t-10 section bac-color-fff">
                <scroll-view 
					class="week-list"
					:scroll="false"
					:scroll-x="true"
					:show-scrollbar="false"
				>	
                    <view class="flex-column align-end mar-b-10 mar-t-10">
                        <view class="flex align-center justify-around">
                            <!-- <view  class="uni-tab-item  font-size-12 text-center" :class="{'active':current_day_index == '-1'}" @click="changeDay(-1,'')">
                                <p>全部</p>
                                <p class="mar-t-5">日期</p>
                            </view> -->
                            <view  class="uni-tab-item font-size-12 text-center" @click="changeDay(index,item.week_num)" :class="{'active':current_day_index == index}" v-for="(item,index) in week_list" :key="index">
                                <p class="text-center">{{item.week}}</p>
                                <p class="mar-t-10 text-center">{{item.date}}</p>
                            </view>
                        </view>
                    </view>
				</scroll-view>
                <view class="mar-t-10">
                    <view class="font-color-999 font-size-14 ">选择预约时间段</view>
                    <view class="choose-consult-time mar-t-20 pos-rel">
                        
                        <view v-for="(hours,i) in week_time" :key="i" class="mar-t-15">
                            <view class="flex">
                                <view class="font-color-666 font-size-15">{{i=='morning'?'上午':'下午'}}：</view>
                                <view class="flex-1 flex align-center">
                                    <view class="item-time" v-for="(itme,t) in hours" :key="t" :class="{'acitve':hours_index==i && time_index==t }"
									@click="changeTime(i,t,itme.hours_around)">{{itme.hours_around}}</view>
                                </view>
                            </view>
                        </view>
                        
                        <!-- <block v-if="hours_list.length">
                            <view
                                class="item-time"
                                v-for="(hours,i) in hours_list"
                                :key="i"
                                :class="{'acitve':time_index==i}"
                                @click="changeTime(i)"
                            >
                                <text>{{hours.hours_around}}</text>
                            </view>
                        </block>
                        <block v-else>
                            <view class="text-center font-color-666 pos-abs no-item-time">
                                <text class="dis-block">请选择日期时间</text>
                            </view>
                        </block> -->
                    </view>
                </view>
            </view>
            <view class="mar-t-10 section bac-color-fff">
               <consult-list :range="counsultors" @yuyue="yuyue"></consult-list> 
            </view>
       </view>
       <view class="mask " v-show="show_module" @click="cancel">
            <view class="module-card" @click.stop="">
                <view class="flex align-center font-bold">
                    <view class="font-color-price ">*</view>
                    <view class="flex-1 font-size-18 mar-l-5">请填写信息</view>
                </view>
                <view class="flex mar-t-20 item-list align-center">
                    <view class="font-color-666 font-size-15 title" >
                        您的姓名
                    </view> 
                    <input type="text" class="flex-1 mar-l-15 font-size-14" placeholder="请填写您的姓名" v-model="link_man">
                </view>
                <view class="flex mar-t-20 item-list">
                    <view class="font-color-666 font-size-15 title">
                        性别
                    </view>
                    <!-- <view class="flex-1 mar-l-15 font-size-14 align-center">
                        <label class="radio"><radio value="男" checked="true" />男</label>
                        <label class="radio mar-l-10"><radio value="女" />女</label>
                    </view> -->
                   <radio-group @change="sexChange" class="flex-1 mar-l-15 font-size-14 align-cente">
                        <label class="dis-inline-block radio-item" >
                            <view class=" font-size-15 ">
                                <radio value="boy" :checked="link_sex === '男'" style="transform:scale(0.7)"/>男
                            </view>
                        </label>
                        <label class="dis-inline-block radio-item" >
                            <view class=" font-size-15 ">
                                <radio value="girl" :checked="link_sex === '女'" style="transform:scale(0.7)"/>女
                            </view>
                        </label>
                    </radio-group>
                </view>
                <view class="flex mar-t-20 item-list align-center">
                    <view class="font-color-666 font-size-15 title" >
                        出生年月
                    </view>
                     <picker class="flex-1 mar-l-15 font-size-14" mode="date" :value="link_birthday" :start="startBirthday" :end="endBirthday" @change="changeBirthday">
                        <view class="uni-input">{{link_birthday}}</view>
                    </picker>
                    <!-- <input type="text" class="flex-1 mar-l-15 font-size-14" placeholder="请填写您的姓名"> -->
                </view>
                <view class="flex mar-t-20 item-list align-center">
                    <view class="font-color-666 font-size-15 title" >
                        联系方式
                    </view>
                    <input type="text" class="flex-1 mar-l-15 font-size-14" placeholder="请填写您的联系方式" v-model="link_mobile" maxlength="11">
                </view>
                <view class="flex mar-t-20 item-list align-center">
                    <view class="font-color-666 font-size-15 title" >
                        联系地址
                    </view>
                    <view class="flex align-center font-size-12 bac-color-eee area-list-picker  mar-l-10 flex-1" >
                        <view class="flex-1 mar-l-3">
                            温州市
                        </view>
                        <view class="flex-1 mar-l-3"> 
                            苍南县
                        </view>
                        <view class="flex-1 mar-l-3">
                             <picker @change="changeArea" :value="area_index" :range="area_list">
                                <view class="uni-input">{{area_list[area_index]}}</view>
                            </picker>
                        </view>
                    </view>
                </view>
                <view class=" item-list over-hid mar-t-15" style="border-radius:8px">
                    <textarea name="" id="" placeholder="请输入您详细地址" v-model="address"></textarea>
                </view>
                <view class="flex mar-t-10 yuyue-btn-tab font-size-14">
                    <view class="flex-1 text-center font-color-fff cancel" @click="cancel">再想想</view>
                    <view class="flex-1 text-center font-color-fff confirm mar-l-15" @click="yuyueConfirm">确认预约</view>
                </view>
            </view>
       </view>
    </view>
</template>

<script>
import consultList from '@/components/consult-list'
import {getConsultorTags,weekList,getConsultors,orderCreate,getRooms} from '@/utils/http'
export default {
    data() {
        return {
            tag_index: 0,
            current_day_index:0,
            hours_index:'morning',
            time_index:0,
            tags:[],
            week_list:[],
            week_time:[],
            hours_around:'',
            week_num:'',
            index_page:0,
			total_page:1,
			counsultors:[],//咨询师列表
            link_birthday:this.getDate(),
            area_list:[],
            area_index:0,
            address:'',
            link_address:'',
            link_man:'',
            link_mobile:'',
            show_module:false,
            counselor_id:'',
            link_sex:'男',
			nickname:''
        }
    },
    components:{
		consultList
	},
     computed: {
        startBirthday() {
            return this.getDate('start');
        },
         endBirthday() {
            return this.getDate('end');
        }
    },
    watch:{
        area_index:{
            handler(newVal, oldVal) {
                this.link_address = '温州市,苍南县,'+this.area_list[newVal] + this.address
            },
        },
        address:{
             handler(newVal, oldVal) {
                this.link_address = '温州市,苍南县,'+this.area_list[this.area_index]+newVal
            },
        }
    },
    methods: {
        getArea(){
            let _that = this
            getRooms({type:'area',num:20}).then(res=>{
                if(res){
                    console.log(res);
                    res.data.forEach(item => {
                        _that.area_list.push(item.name)
                    });
                }
            })
        },
        init(){
            this.index_page = 0
            this.total_page = 0
            this.counsultors = []
        },
        //咨询方式
		changeTag(i) {
            if(this.tag_index != i){
                this.tag_index = i
                this.init();
                this.getConsultorList();
            }
		},
        changeDay(i,week_num){
            if(this.current_day_index !=i){
                this.current_day_index = i;
                this.week_num = week_num;
                this.init();
                this.getConsultorList();
            }
            
        },
        sexChange(e){
            this.sex = e.detail.value
        },
        cancel(){
            this.show_module = false;
            this.counselor_id = '';
        },
        changeArea(e){
            this.area_index = e.target.value
        },
        changeBirthday(e){
            this.link_birthday = e.detail.value;
        },
        async getConsultorTags(){
            await getConsultorTags().then(res=>{
                if(res){
                    this.tags = [...this.tags,...res];
                }
            })
        },
        async weekList(){
            await weekList().then(res=>{
                  if(res){
                    this.week_list  = res.week;
                    this.week_time = res.week_time
                }
                console.log(this.week );
            })
        },
        yuyue(item){
			console.log('item',item)
            this.counselor_id = item.id;
			this.nickname = item.user.nickname
            this.show_module = true;
         
        },
        //确认提交
        yuyueConfirm(){
               // console.log(counselor_id);
            let current_tag = this.tags[this.tag_index];
            let current_week = this.week_list[this.current_day_index]
            let current_week_time = this.week_time[this.hours_index][this.time_index];
            console.log(current_week_time);
            orderCreate({
                counselor_id:this.counselor_id,
				nickname:this.nickname,
                tag:current_tag.tag_name,
                meeting_time:current_week.date_text,
                meeting_hours:current_week_time.hours_around,
                meeting_hours_type:current_week_time.type,
                week_num:current_week.week_num,
                link_address:this.link_address,
                link_man:this.link_man,
                link_mobile:this.link_mobile,
                link_sex:this.link_sex,
                link_birthday:this.link_birthday
                }).then(res=>{
                    console.log(res);
                    if(res){
                        this.redirect('/pages/order/success')
                    }
            })
        },
        changeTime(i,t,hours_around){
            this.hours_index = i 
            this.time_index = t;
            this.hours_around = hours_around
            this.init();
            this.getConsultorList();
        },
       getConsultorList(){
			let _that = this;
            let current_tag = this.tags[this.tag_index];
            let week = this.week_list[this.current_day_index]
            let hours = this.week_time[this.hours_index][this.time_index];
			getConsultors({page:this.index_page + 1,hours_around:hours.hours_around,week_num:week.week_num,tag:current_tag.tag_name,meeting_time:week.date_text,}).then(res=>{
				if(res){
					_that.counsultors = [..._that.counsultors,...res.data]
					_that.index_page = res.current_page;
					_that.total_page = res.last_page;
				}
			})
		},
    },
    async onLoad(option) {
        this.getArea();
        await this.getConsultorTags();
        await this.weekList();
        this.getConsultorList();
       
    },
}
</script>

<style scoped>
page{
    background: #F4F5FA;
}
.tab-item.active{
    background-color: #0088FF !important;
    color: #fff;
   
}
.tab-item{
    width: 120px;
    padding:8px 10px;
    text-align: center;
    color: #333;
    background-color: #f4f4f4;
}
.section{
    padding: 24rpx 20rpx;
    border-radius: 8px;
}


.choose-tag-time view {
	display: inline-block;
	box-sizing: border-box;
	/* border: 1px solid #dadada; */
	color: #222222;
	background-color: #f6f6f6;
	text-align: center;
	/* font-weight: 500; */
	font-size: 14px;
	border-radius: 3px;
	min-width: 90px;
	height: 32px;
	line-height: 32px;
}
.choose-tag-time .acitve {
	color: #ffffff !important;
	background-color: #0088ff !important;
}


.week-list {
	/* #ifdef APP-PLUS */
	width: 750rpx;
	/* #endif */
	flex-direction: row;
	/* #ifndef APP-PLUS */
	white-space: nowrap;
	/* #endif */
}
/* #ifndef APP-NVUE */
.week-list ::-webkit-scrollbar {
	display: none;
	width: 0 !important;
	height: 0 !important;
	-webkit-appearance: none;
	background: transparent;
}
/* #endif */

.uni-tab-item {
	
	/* #ifndef APP-PLUS */
	display: inline-block;
	/* #endif */
	flex-wrap: nowrap;
	/* padding-left: 10px;
	padding-right: 10px; */
	padding: 10px 8px;
    background-color: #F6F6F6;
    /* margin-left: 5px; */
    border-radius: 5px;
    min-width: 42px;
}

.uni-tab-item.active {
    color: #fff;
	background-color: #0088FF;
}


.choose-consult-time .no-item-time {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.choose-consult-time {
	min-height: 6.3em;
	/* column-count: 5;
	box-sizing: border-box; */
}
.choose-consult-time .item-time {
	display: inline-block;
	box-sizing: border-box;
	border: 1px solid #dadada;
	margin-left: 6px;
	margin-bottom: 10px;
	color: #ababab;
	text-align: center;
	font-weight: 500;
	font-size: 28rpx;
	padding: 4px 9px;
	border-radius: 5px;
}
.choose-consult-time .acitve {
	color: #ffffff !important;
	background-color: #0088ff !important;
}
.module-card{
    background-color: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 70%;
    z-index: 101;
    padding: 30px 25px;
    border-radius: 8px;

}
.module-card .item-list .title{
    min-width: 90px;
    text-align: justify;
    text-align-last: justify;
}
.item-list input{
    padding: 8px 0px;
}
.item-list textarea{
    height: 40px;
    background-color: #EEEEEE;
    border-radius: 8px;
    padding: 10px;
}
.area-list-picker{
    padding: 5px 6px;
}
/deep/.input-placeholder {
    font-size: 32rpx;
}
.yuyue-btn-tab .cancel{
    background-color: #BFBFBF;
    padding: 12px 16px;
    border-radius: 8px;
}
.yuyue-btn-tab .confirm{
    background-color: #0088FF;
    padding: 12px 16px;
    border-radius: 8px;
}
</style>